{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
~}}

<ListAccordion data-test-scale-events @source={{@events}} @key="time" as |a|>
  <a.head
    @buttonLabel="details"
    @isExpandable={{a.item.hasMeta}}
    class="with-columns"
  >
    <div class="columns inline-definitions">
      <div class="column is-3">
        <span class="icon-field">
          <span
            class="icon-container"
            title="{{if a.item.error "Error event"}}"
            data-test-error={{a.item.error}}
          >
            {{#if a.item.error}}
              <Hds::Icon @name="x-circle-fill" @isInline={{true}} @color="critical" />
            {{/if}}
          </span>
          <span data-test-time title="{{format-ts a.item.time}}">
            {{format-month-ts a.item.time}}
          </span>
        </span>
      </div>
      <div class="column is-2">
        {{#if a.item.hasCount}}
          <Hds::TooltipButton data-test-count-icon @text="Count
              {{if a.item.increased "increased" "decreased"}}
               to
              {{a.item.count}}" aria-label="More information">
            {{#if a.item.increased}}
              <Hds::Icon @name="arrow-up" @isInline={{true}} />
            {{else}}
              <Hds::Icon @name="arrow-down" @isInline={{true}} />
            {{/if}}
          </Hds::TooltipButton>
          <span data-test-count>
            {{a.item.count}}
          </span>
        {{/if}}
      </div>
      <div class="column" data-test-message>
        {{a.item.message}}
      </div>
    </div>
  </a.head>
  <a.body @fullBleed={{true}}>
    <JsonViewer @json={{a.item.meta}} @fluidHeight={{true}} />
  </a.body>
</ListAccordion>
